<template>
  <el-form-item label="频道"  prop="channelId">
    <!-- clearable：允许清空选择 -->
          <el-select
          clearable
          v-model="channelId"
          @change='hChange'
          placeholder="请选选择频道">
            <el-option
            v-for="channel in channelList"
            :key="channel.id"
            :label="channel.name"
            :value="channel.id"></el-option>
          </el-select>
    </el-form-item>
</template>

<script>
export default {
  props: ['value'],
  data () {
    return {
      channelId: this.value,
      channelList: []
    }
  },
  watch: {
    value: function (newVal, oldVal) {
      this.channelId = newVal
    }
  },
  created () {
    this.loadChannels()
  },
  methods: {
    async loadChannels () {
      // 发送请求 获取频道数据
      const res = await this.$http({
        method: 'GET',
        url: '/mp/v1_0/channels'
      })
      this.channelList = res.data.data.channels
      // console.log(res)
    },
    hChange () {
      this.$emit('input', this.channelId)
    }
  }
}
</script>
